<template>
<div class="customsDeclarationBoxVue">



  <div class="head">

    <export-excel module-name="documentprocess_cc_customsDeclarationBox" file-name="报关箱单.xlsx"></export-excel>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="24">
            <div>
              <p>TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
              <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
              <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA</p>
              <p>TEL:+86-10-50911288</p>
              <p>PACKING LIST</p>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="4" class="-to01">
            <p>TO:</p>
          </el-col>
          <el-col :span="8">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires -to02">
              <ul>
                <li>
                  <el-row>
                    <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_toName" placeholder="请输入买方" />
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_toAdd" placeholder="请输入买方地址" />
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_toTel" placeholder="请输入买方电话" />
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="4" class="-to03"></el-col>
          <el-col :span="8" class="-el-col -to04">
            <div class="bill-of-lading-project-requires -bill-of-lading-project-requires">
              <ul>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      <p>Invoice No.:</p>
                    </el-col>
                    <el-col :span="12">
                      <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_invoiceNO" placeholder="请输入内容" />
                    </el-col>
                  </el-row>
                </li>
                <li>
                  <el-row>
                    <el-col :span="12" style="text-align:left;">
                      <p>Invoice Date:</p>
                    </el-col>
                    <el-col :span="12">
                      <el-date-picker style="width: 100%;" value-format="yyyy-MM-dd" :disabled="!editable" @change="handleSimpleSelect"   type="date" v-model="documentprocess_cc_cdb_invoiceDate" ></el-date-picker>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <el-row class="-from">
          <el-col :span="24">
            <el-row>
              <el-col :span="4">
                <p>From:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_fromPort" placeholder="请输入内容" />
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <p style="text-align:left">Terms of Payment:</p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>To:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_toPort" placeholder="请输入内容" />
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_payTerms" placeholder="请输入内容" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>Shipment Date:</p>
              </el-col>
              <el-col :span="8">
                <el-date-picker class="shipment-picker relate-color" value-format="yyyy-MM-dd" format="yyyy/MM" @change="handleSimpleInput"  :disabled="!editable"   type="date" v-model="documentprocess_cc_cdb_shipDate"  ></el-date-picker>
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <p style="text-align:left">Trade Term:</p>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="4">
                <p>By:</p>
              </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_transport" placeholder="请输入内容" />
              </el-col>
              <el-col :span="4"> </el-col>
              <el-col :span="8">
                <input type="text" class="relate-color" :readonly="!editable" @input="handleSimpleInput"  v-model="documentprocess_cc_cdb_tradeTerms" placeholder="请输入内容" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-table class="tcf-table-1" :data="documentprocess_cc_cdb_table" border style="width: 100%" >

            <el-table-column type="index" label="Item" :index="indexMethod"></el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_products" label="Description of Goods">
            <template slot-scope="scope">
                  <input type="text"  @input="handleTableInput(scope, 'documentprocess_cc_cdb_products', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_products" />
             </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_description" label="Specification&Model">
            <template slot-scope="scope">
                  <input type="text"  @input="handleTableInput(scope, 'documentprocess_cc_cdb_description', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_description" />
            </template>
          </el-table-column>
          <el-table-column prop="documentprocess_cc_cdb_quantity" label="Quantity(PCS)">
            <template slot-scope="scope">
                  <input type="number" :min="0" @input="handleTableInput(scope, 'documentprocess_cc_cdb_quantity', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_quantity" />
            </template>
          </el-table-column>

            <el-table-column prop="documentprocess_cc_cdb_packagenumber" label="PackageNumber">
            <template slot-scope="scope">
                  <input type="number"  @input="handleTableInput(scope, 'documentprocess_cc_cdb_packagenumber', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_packagenumber" />
            </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_cdb_netWeight" label="Net WeightNet(KGS)">
            <template slot-scope="scope">
                  <input type="number" :min="0" @input="handleTableInput(scope, 'documentprocess_cc_cdb_netWeight', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_netWeight" />
            </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_cdb_grossWeight" label="Gross WeightNet(KGS)">
            <template slot-scope="scope">
                  <input type="number" :min="0" @input="handleTableInput(scope, 'documentprocess_cc_cdb_grossWeight', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_grossWeight" />
            </template>
          </el-table-column>

          <el-table-column prop="documentprocess_cc_cdb_measurement" label="Measurement(CM)">
            <template slot-scope="scope">
                  <input type="number" :min="0"  @input="handleTableInput(scope, 'documentprocess_cc_cdb_measurement', $event)"  :readonly="!editable"   v-model="scope.row.documentprocess_cc_cdb_measurement" />
            </template>
          </el-table-column>

          <el-table-column
          v-if="editable"
          label="操作"
          width="100">
          <template slot-scope="scope" >
            <el-button @click="addNewLine(scope.$index, documentprocess_cc_cdb_table)" type="text" size="small">添加</el-button>
            <el-button @click="removeCurrentLine(scope.$index, documentprocess_cc_cdb_table)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
        </el-table>


        <div class="extra-table">
          <el-row class="extra-money">
              <el-col  style="width: 29.5%;" ><div>合计TOTAL</div></el-col>
              <el-col style="width: 12%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdb_total_quantity" @input="handleNeedCtrlInput('documentprocess_cc_cdb_total_quantity', $event)"/>
              </el-col>
              <el-col style="width: 12%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdb_totalPackage" @input="handleRelateInput('totalpackage', $event)"/>
              </el-col>
              <el-col style="width: 12%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdb_total_netWeight" @input="handleRelateInput('totalnet', $event)"/>
              </el-col>
              <el-col style="width: 12%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdb_total_grossWeight" @input="handleRelateInput('totalgross', $event)"/>
              </el-col>
              <el-col style="width: 14%;">
                <input type="number" :min="0" v-model="documentprocess_cc_cdb_total_measurement" @input="handleNeedCtrlInput('documentprocess_cc_cdb_total_measurement', $event)"/>
              </el-col>
          </el-row>
       </div>



        <el-row class="-footer">
          <el-col :span="24" class="-footer">
            <div>
              <div class="-footer-top">
                Origin of China
              </div>
              <div>
                <span>TOTAL PACKAGES:  </span>
                <span class="-footer-top-value">
                  {{documentprocess_cc_cdb_totalPackage}}
                </span>
                <input type="text" @input="handleRelateInput('totalpackage-unit', $event)" :readonly="!editable"  v-model="documentprocess_cc_cdb_totalPackageUnit" placeholder="请输入内容" class="-footer-top-input relate-color" />
              </div>
              <div>
                <span>TOTAL NET WEIGHT: </span>
                <span class="-footer-top-value">{{documentprocess_cc_cdb_total_netWeight}}</span>
                <span> KGS</span>
              </div>
              <div>
                <span>TOTAL GROSS WEIGHT: </span>
                <span class="-footer-top-value">{{documentprocess_cc_cdb_total_grossWeight}}</span>
                <span> KGS</span>
              </div>
              <div>
                <span>TOTAL VOLUME: </span>
                <span class="-footer-top-value">{{documentprocess_cc_cdb_total_measurement}}</span>
                <span> CBM</span>
              </div>
              <div>
                <span>Marks and Numbers:</span>
                <input class="-footer-top-input" type="text"  @input="handleRelateInput('documentprocess_cc_cdb_marks', $event)" :readonly="!editable"  v-model="documentprocess_cc_cdb_marks" placeholder="请输入内容" />
              </div>
              <p class="-footer-bottom">TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>



    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>
        <ul class="upload-files">
          <li @mouseover="handleOver(item)"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles" :key="index">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>


  </div>




</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'
import {toFixed} from '@/util/transform.js';
import { handleEmit } from '../common.js';

import exportExcel from '../../../common/exportExcel.vue';

export default {
  created() {

    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    });
  },

  mounted(){
      let self = this;
      
      this.bus.$on('bind-new-ftc', function(ftcData){
      //关联绑定的外贸合同

      self.documentprocess_cc_cdb_toName = ftcData.bf_buy_name;
      self.documentprocess_cc_cdb_toAdd = ftcData.bf_buy_address;
      self.documentprocess_cc_cdb_toTel = ftcData.bf_buy_tel;
      self.documentprocess_cc_cdb_invoiceNO = ftcData.bf_orderNumber;
      self.documentprocess_cc_cdb_marks = ftcData.bf_shippingMarks;
      self.documentprocess_cc_cdb_fromPort = ftcData.bf_portOfLoad;
      self.documentprocess_cc_cdb_toPort = ftcData.bf_portOfDestination;
      self.documentprocess_cc_cdb_transport = ftcData.bf_shipment;
      self.documentprocess_cc_cdb_tradeTerms = ftcData.bf_tradeTerm;
      self.documentprocess_cc_cdb_shipMarks = ftcData.bf_shippingMarks;

      let table = [];
      for (let i = 0; i < ftcData.bf_table1.length; i++) {
        let obj = {
          documentprocess_cc_cdb_products: (ftcData.bf_table1[i]).bf_table1_product,
          documentprocess_cc_cdb_description: (ftcData.bf_table1[i]).bf_table1_description,
          documentprocess_cc_cdb_quantity: (ftcData.bf_table1[i]).bf_table1_quantity,
          documentprocess_cc_cdb_packagenumber: 0,
          documentprocess_cc_cdb_netWeight: 0, 
          documentprocess_cc_cdb_grossWeight: 0, 
          documentprocess_cc_cdb_measurement: 0
        };
        table.push(obj);
      }
      self.documentprocess_cc_cdb_table = table;
      self.documentprocess_cc_cdb_total_quantity = self.computeTableTotal("number");

      handleEmit(null, () => {
        self.emitToParent();

        //通知报关合同 
        self.emitToNext("documentprocess_cc_customsDeclarationContract-mark", self.documentprocess_cc_cdb_shipMarks);
      });
    });

    this.bus.$on("documentprocess_cc_customsDeclarationBox-shipdate", function(arg){
      self.documentprocess_cc_cdb_shipDate = arg[0];
      self.emitToParent();
    });
  },
  updated() {
  },

  methods: {
    /**
     * 更新数据到单证员报关
     */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromCB", "documentprocess_cc_customsDeclarationBox", obj);
    },

    /**
     * 将对应的数据传递给下一个组件
     * @param {String} eventName  事件名称
     * @param {Array} arg   传递的参数
    */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },


    /**
     * 处理NaN的数据
     */
    handleIsNaN(value){
      if (Number.isNaN(value)){
        return 0;
      } else {
        return value;
      }
    },

    /**
     * 统计表格的列总和
     * @param {String} type
     */
    computeTableTotal(type){
      let total = 0;
      if (type === 'number'){
        this.documentprocess_cc_cdb_table.forEach(line => {
          total += this.handleIsNaN(Number(line.documentprocess_cc_cdb_quantity));
        });
        return total;
      } else if (type === 'gross'){
        this.documentprocess_cc_cdb_table.forEach(line => {
          total += this.handleIsNaN(Number(line.documentprocess_cc_cdb_grossWeight));
        });
        return toFixed(total);
      } else if (type === 'net') {
        this.documentprocess_cc_cdb_table.forEach(line => {
          total += this.handleIsNaN(Number(line.documentprocess_cc_cdb_netWeight));
        });
        return toFixed(total);
      } else if (type === 'measure'){
        this.documentprocess_cc_cdb_table.forEach(line => {
          total += this.handleIsNaN(Number(line.documentprocess_cc_cdb_measurement));
        });
        return toFixed(total);
      } else if (type === 'package'){
        this.documentprocess_cc_cdb_table.forEach(line => {
          total += this.handleIsNaN(parseInt(line.documentprocess_cc_cdb_packagenumber));
        });

        return Number.isNaN(parseInt(total).toString()) ? '0' : parseInt(total).toString();
      }
    },

     /**
     * 处理基本的输入
     */
    handleSimpleInput(){
      this.emitToParent();
    },

    /**
     * 处理基本的下拉选择
     */
    handleSimpleSelect(value){
      this.emitToParent();
    },


    /**
     * 输入需要控制的input
     */
    handleNeedCtrlInput(key, event){
       if (key === 'documentprocess_cc_cdb_total_measurement') {
          if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
            this.documentprocess_cc_cdb_total_measurement =  event.target.value;
          } else {
            this.documentprocess_cc_cdb_total_measurement =  toFixed(event.target.value);
          }
       } else if (key === 'documentprocess_cc_cdb_total_quantity') {
            this. documentprocess_cc_cdb_total_quantity =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
       }

       this.emitToParent();
    },


    /**
     * 处理有关联的数据
     */
    handleRelateInput(type, event) {
      if (type === 'totalpackage'){
        // if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
        //   this.documentprocess_cc_cdb_totalPackage =  event.target.value;
        // } else {
        //   this.documentprocess_cc_cdb_totalPackage =  toFixed(event.target.value);
        // }

        this.documentprocess_cc_cdb_totalPackage  =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
        
        //通知报关合同  
        this.emitToNext("documentprocess_cc_customsDeclarationContract-totalpackage",this.documentprocess_cc_cdb_totalPackage);
        //通知 报关单
        this.emitToNext("documentprocess_cc_declarationForm-totalpackage",this.documentprocess_cc_cdb_totalPackage);

      } else if (type === 'totalpackage-unit'){
        //通知报关合同  
        this.emitToNext("documentprocess_cc_customsDeclarationContract-totalpackage-unit", event.target.value);
        //通知 报关单
        this.emitToNext("documentprocess_cc_declarationForm-totalpackage-unit", event.target.value);

      } else if (type === 'totalgross') {
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
          this.documentprocess_cc_cdb_total_grossWeight =  event.target.value;
        } else {
          this.documentprocess_cc_cdb_total_grossWeight =  toFixed(event.target.value);
        }
        //通知 报关单
        this.emitToNext("documentprocess_cc_declarationForm-totalgross",this.documentprocess_cc_cdb_total_grossWeight);

      } else if (type === 'totalnet'){
        if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
          this.documentprocess_cc_cdb_total_netWeight =  event.target.value;
        } else {
          this.documentprocess_cc_cdb_total_netWeight =  toFixed(event.target.value);
        }
        //通知 报关单
        this.emitToNext("documentprocess_cc_declarationForm-totalgross",this.documentprocess_cc_cdb_total_netWeight);
      } else if (type === 'documentprocess_cc_cdb_marks'){

        //通知报关合同
        this.emitToNext("documentprocess_cc_customsDeclarationContract-mark", event.target.value);
      }
      this.emitToParent();
    },


    /**
     * 处理表格输入
     */
    handleTableInput(scope, key, value){
      let oldData = _.cloneDeep(this.documentprocess_cc_cdb_table[scope.$index]), temp = 0;

      switch(key) {
          case 'documentprocess_cc_cdb_quantity':
            oldData[key] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
            this.documentprocess_cc_cdb_table.splice(scope.$index, 1, oldData);
            this.documentprocess_cc_cdb_total_quantity = this.computeTableTotal("number");
            break;

          case 'documentprocess_cc_cdb_packagenumber':
            // if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
            //   oldData[key] =  event.target.value;
            // } else {
            //   oldData[key] =  toFixed(event.target.value);
            // }
            
            oldData[key] =  Number.isNaN(parseInt(event.target.value).toString()) ? '0' : parseInt(event.target.value).toString();
            this.documentprocess_cc_cdb_table.splice(scope.$index, 1, oldData);
            
            this.documentprocess_cc_cdb_totalPackage = this.computeTableTotal("package");

            //通知报关合同 package变化
            this.emitToNext("documentprocess_cc_customsDeclarationContract-totalpackage", this.documentprocess_cc_cdb_totalPackage);
            //通知报关单 
            this.emitToNext("documentprocess_cc_declarationForm-totalpackage",this.documentprocess_cc_cdb_totalPackage);
            break; 
          
          case 'documentprocess_cc_cdb_netWeight':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
            } else {
              oldData[key] =  toFixed(event.target.value);
            }
            this.documentprocess_cc_cdb_total_netWeight = this.computeTableTotal("net");

            //通知报关单表格中 重量值
            this.emitToNext("documentprocess_cc_declarationForm-table-netweight", scope.$index, key, oldData[key]);

            //通知报关单中 netweight 总重量
            this.emitToNext("documentprocess_cc_declarationForm-totalnet",this.documentprocess_cc_cdb_total_netWeight);
            break;

          case 'documentprocess_cc_cdb_grossWeight':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
            } else {
              oldData[key] =  toFixed(event.target.value);
            }
            this.documentprocess_cc_cdb_total_grossWeight = this.computeTableTotal("gross");
            this.emitToNext("documentprocess_cc_declarationForm-totalgross",this.documentprocess_cc_cdb_total_grossWeight);
            break;
            
          case 'documentprocess_cc_cdb_measurement':
            if (/^\d+\.?\d{0,2}$/.test(event.target.value)) {
              oldData[key] =  event.target.value;
            } else {
              oldData[key] =  toFixed(event.target.value);
            }
            this.documentprocess_cc_cdb_total_measurement = this.computeTableTotal("measure");
            break; 

      }
      this.emitToParent();
    },

    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },

    indexMethod(value) {
      let lines = this.documentprocess_cc_cdb_table.length;
      return value + 1;
    },
    selectFiles(event){
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
          self.emitToParent();
        });
      });
    },

    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },


    addNewLine(currentIndex, table){
      let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};
      let keys = [
          "documentprocess_cc_cdb_products",
          "documentprocess_cc_cdb_description",
          "documentprocess_cc_cdb_quantity",
          "documentprocess_cc_cdb_packagenumber",
          "documentprocess_cc_cdb_netWeight",
          "documentprocess_cc_cdb_grossWeight",
          "documentprocess_cc_cdb_measurement",
      ];
      keys.forEach(key => {
        newLine[key] = lastLine[key];
      });
      table.splice(currentIndex + 1, 0, newLine);

      this.documentprocess_cc_cdb_total_quantity = this.computeTableTotal("number");
      this.documentprocess_cc_cdb_total_netWeight = this.computeTableTotal("net");
      this.documentprocess_cc_cdb_total_grossWeight = this.computeTableTotal("gross");
      this.documentprocess_cc_cdb_total_measurement = this.computeTableTotal("measure");
      this.documentprocess_cc_cdb_totalPackage = this.computeTableTotal("package");

      handleEmit(null, () => {
        this.emitToParent();

        //通知报关合同 的package发生了变化
        this.emitToNext("documentprocess_cc_customsDeclarationContract-totalpackage", this.documentprocess_cc_cdb_packagenumber);

        //通知报关单表格中对应的 重量的值变化
        this.emitToNext("documentprocess_cc_declarationForm-table-netweight-frombox",currentIndex + 1, newLine.documentprocess_cc_cdb_netWeight);

        //通知报关单中对应的值变化
        this.emitToNext("documentprocess_cc_declarationForm-totalpackage", this.documentprocess_cc_cdb_totalPackage);
        this.emitToNext("documentprocess_cc_declarationForm-totalnet", this.documentprocess_cc_cdb_total_netWeight);
        this.emitToNext("documentprocess_cc_declarationForm-totalgross", this.documentprocess_cc_cdb_total_grossWeight);
        
      });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
        this.documentprocess_cc_cdb_total_quantity = this.computeTableTotal("number");
        this.documentprocess_cc_cdb_total_netWeight = this.computeTableTotal("net");
        this.documentprocess_cc_cdb_total_grossWeight = this.computeTableTotal("gross");
        this.documentprocess_cc_cdb_total_measurement = this.computeTableTotal("measure");
        this.documentprocess_cc_cdb_totalPackage = this.computeTableTotal("package");

        handleEmit(null, () => {
          this.emitToParent();

          //通知报关合同 的package发生了变化
          this.emitToNext("documentprocess_cc_customsDeclarationContract-totalpackage", this.documentprocess_cc_cdb_totalPackage);

          //通知报关单中对应的值变化
          this.emitToNext("documentprocess_cc_declarationForm-totalpackage", this.documentprocess_cc_cdb_totalPackage);
          this.emitToNext("documentprocess_cc_declarationForm-totalnet", this.documentprocess_cc_cdb_total_netWeight);
          this.emitToNext("documentprocess_cc_declarationForm-totalgross", this.documentprocess_cc_cdb_total_grossWeight);
        });
      }
    },
  },
  data() {
    return {
      id: '',
      formInstId: '',
      attachedFiles: [],
      documentprocess_cc_cdb_toName: '',
      documentprocess_cc_cdb_toAdd: '',
      documentprocess_cc_cdb_toTel: '',
      documentprocess_cc_cdb_invoiceNO: '',
      documentprocess_cc_cdb_invoiceDate: '',
      documentprocess_cc_cdb_fromPort: '',
      documentprocess_cc_cdb_toPort: '',
      documentprocess_cc_cdb_shipDate: '',
      documentprocess_cc_cdb_transport: '',
      documentprocess_cc_cdb_payTerms: 'BY T/T',
      documentprocess_cc_cdb_tradeTerms: '',

      documentprocess_cc_cdb_total_quantity: 0,
      documentprocess_cc_cdb_total_netWeight: 0, 
      documentprocess_cc_cdb_total_grossWeight: 0, 
      documentprocess_cc_cdb_total_measurement: 0, 

      documentprocess_cc_cdb_table: [
        {
          documentprocess_cc_cdb_products: '', //产品
          documentprocess_cc_cdb_description: '', //描述
          documentprocess_cc_cdb_quantity: 0, //数量
          documentprocess_cc_cdb_packagenumber: '', //
          documentprocess_cc_cdb_netWeight: 0, //net weight
          documentprocess_cc_cdb_grossWeight: 0, //gross weight
          documentprocess_cc_cdb_measurement: 0 // measurement
        }
      ],

      documentprocess_cc_cdb_totalPackage: 0,
      documentprocess_cc_cdb_totalPackageUnit: 'PKGS',
      documentprocess_cc_cdb_marks: '',
      documentprocess_cc_cdb_shipMarks: '',

      keys: [
        "id",
        "formInstId",
        "attachedFiles",
        "documentprocess_cc_cdb_toName",
        "documentprocess_cc_cdb_toAdd",
        "documentprocess_cc_cdb_toTel",
        "documentprocess_cc_cdb_invoiceNO",
        "documentprocess_cc_cdb_invoiceDate",
        'documentprocess_cc_cdb_fromPort',
        "documentprocess_cc_cdb_toPort",
        "documentprocess_cc_cdb_shipDate",
        "documentprocess_cc_cdb_transport",
        "documentprocess_cc_cdb_payTerms",
        "documentprocess_cc_cdb_tradeTerms",
        "documentprocess_cc_cdb_total_quantity",
        "documentprocess_cc_cdb_total_netWeight",
        "documentprocess_cc_cdb_total_grossWeight",
        "documentprocess_cc_cdb_total_measurement",
        "documentprocess_cc_cdb_table",
        "documentprocess_cc_cdb_totalPackage",
        "documentprocess_cc_cdb_totalPackageUnit",
        "documentprocess_cc_cdb_marks",
        "documentprocess_cc_cdb_shipMarks"
      ]
    }
  },
    watch: {
    datas(newValue, oldValue){
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  props: {
    datas: {
      type: Object,
      required: true,
    },
    editable: {
      type: Boolean,
      required:true
    },
    bus: {
      type: Object,
      required: true
    }
  },
  components: {
    exportExcel
  }
}
</script>

<style lang="scss" >
.customsDeclarationBoxVue {

    padding: 20px;
    border: 1px solid #999;

    font-size: 15px;
    line-height: 30px;

    .relate-color {
      // background-color: #efa54b36 !important;

      input {
        background-color: transparent !important;
      }
    }

    p {
      padding: 5px 0;

      span {
        font-weight: bolder;
      }
    }

    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }


    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .bind {
                float: left;
            }
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .el-table__body-wrapper {
              overflow: hidden;
            }


            input {
              outline: none;
              background-color: transparent;
              border: 1px solid #e6ebf5;
              width: 90%;
              height: 32px;
            }

            .el-date-editor {
                input {
                  width: 100%;
                }
            }

            .tcf-table-1 {
              input {
                border: none;
              }
            }


              .extra-table, {
                font-size: 14px;
                .extra-money {
                    border: 1px solid #e6ebf5;
                    border-top: none;
                    text-align: center;
                    color: #5a5e66;

                    .el-col {
                      height: 40px;
                      line-height: 40px;
                      border: none !important;

                      &:nth-child(1),
                      &:nth-child(2),
                      &:nth-child(3),
                      &:nth-child(4),
                      &:nth-child(5),{
                        border:none;
                        border-right: 1px solid #e6ebf5 !important;
                      }
                    }

                    input {
                      width: 94%;
                      height: 36px;
                      border: none;
                      outline: none;
                      text-indent: 1em;
                      color: #5a5e66;
                    }
                  }
                }


            .shipment-picker {
              float: left;
              margin-left: 20px;
            }

            td {
                border: 1px solid #e6ebf5;
            }
            
            .el-input__inner {
                background: transparent;
                padding: 0px;
            }

            .el-date-editor {
              .el-input__inner {
                padding-left: 30px;
              }
            }

            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #e6ebf5;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #e6ebf5;
                    border-left: 1px solid #e6ebf5;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #e6ebf5;
                    padding: 5px;
                }
            }
            .-to01,
            .-to03,
            .-to04 {
                height: 133px;
            }
            .-to04 {
                border-right: 1px solid #e6ebf5 !important;
            }
            .-to02 {
                ul {
                    li {
                        margin-bottom: 1px;
                    }
                }
            }
            .-from {
                .el-col-24 {
                    padding: 0;
                    .el-row {
                        border: none;
                    }
                }
                .el-col-4,
                .el-col-8 {
                    border-right: none;
                }
            }
            .-footer {
                width: 100%;
                text-align: left !important;
                border: none !important;
                .-footer-top {
                    text-align: right !important;
                    p {
                        display: inline-block !important;
                    }

                }
                .-footer-bottom {
                    text-align: center;
                }
            }
            .-footer-top-input {
                width: 220px !important;
            }
            .el-table {
                margin-top: 20px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

          .-footer-top-value {
            display: inline-block;
            padding: 0 20px;
          }
        }

        .upload {
          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

        .select-orders {

            // padding: 20px 0;

            li {
                padding: 5px 0;
            }
            .order-left {
                float: left;
            }
            .order-right {
                float: right;
            }
        }

    }

    .bind-window {
        .el-form--inline .el-form-item {
            margin-right: 15px;
        }

        td {
            border: 1px solid #e6ebf5;
        }

        td:not(.el-table_1_column_1) {
            width: 120px;
            min-width: 120px;
        }

        .dialog-footer {
            text-align: center;
            button {
                margin-right: 80px;
            }
        }

        a {
            color: #409EFF;
        }

    }
}
</style>
